<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>z-UI-table</title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-alert/css/z-UI.alert.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-tab/css/z-UI.tab.css"/>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="z-UI.js"></script>
    <script type="text/javascript" src="z-UI-alert/js/z-UI.alert.js"></script>
    <script type="text/javascript" src="z-UI-tab/js/z-UI.tab.js"></script>
    <style>
        #pageTable td{
            vertical-align: top;
        }
    </style>
</head>
<body class="zUI-app">

<div class="zUI-full" style="overflow-x: hidden;overflow-y: auto;padding: 20px;">

    <table style="width: 100%;border-collapse: collapse" class="zUI-table" id="pageTable">
        <tr>
            <td colspan="2"><span class="zUI-strik nobg sm">普通的数据表格</span></td></tr>
        <tr>
            <td>
                <div class="zUI-row"><table id="table1"></table></div>
            </td>
            <td>
                <pre id="code1" class="zUI-code" style="height: 300px;"></pre>
            </td>
        </tr>
        <tr>
            <td colspan="2"><span class="zUI-strik nobg sm">进阶功能表格</span></td></tr>
        <tr>
            <td>
                <p>可合并列头</p>
                <table id="table5"></table>
            </td>
            <td>
                <p>行数据支持拓展，每一个数据行后面支持展示一个附加行，并且可以折叠或者展开，并且支持事件；行间支持跳色，跳色可以循环展示多种颜色</p>
                <div style="width: 600px;height: 300px;"><table id="table2"></table></div>
            </td>
        </tr>
        <tr>
            <td colspan="2"><span class="zUI-strik nobg sm">嵌套表格</span></td></tr>
        <tr>
            <td>
                <p>行详情中展示表格，与主表格进行拼接组合展示</p>
                <div style="width: 600px;height: 300px;"><table id="table6"></table></div>
            </td>
            <td>
                <pre id="code2" class="zUI-code" style="height: 500px;"></pre>
            </td>
        </tr>
        <tr>
            <td colspan="2"><span class="zUI-strik nobg sm">静态数据分页表格</span></td></tr>
        <tr>
            <td>
                <p>当一个静态表格要展示较多数据时，可以将静态数据渲染成分页表格的形式展示</p>
                <button type="button" class="zUI-btn sm" id="btn3" onclick="zUI.dialog.alert('<pre>'+JSON.stringify(obj3.getCheckedData(),null,2)+'</pre>')">获得选中行</button>
                <button type="button" class="zUI-btn sm" onclick="obj3.width(790);obj3.height(380)">修改表格宽高</button>
                <br>
                <br>
                <table id="table3"></table>
            </td>
            <td>
                <pre id="code3" class="zUI-code" style="height: 300px;"></pre>
            </td>
        </tr>
        <tr>
            <td colspan="2"><span class="zUI-strik nobg sm">动态数据分页表格</span></td></tr>
        <tr>
            <td>
                <p>从服务器请求数据，然后渲染显示，分页参数、排序参数、表单查询参数会自动传入后台，无需手动传入；其中排序参数格式为"[+-][字段名]"，例如"+age"表示按照age进行asc排序，"-age"表示进行desc排序，多列排序时会用"|"分隔。</p>
                <div style="width: 750px;height: 400px">
                    <div style="height: 40px;display: inline-block;padding-bottom: 10px;">
                        <form id="queryForm">
                            <input class="zUI-input" style="width: 100px;" name="name1"><button type="button" class="zUI-btn sm" id="queryBtn"><i class="zUI-icon fa fa-search"></i>绑定按钮查询</button>
                            <button type="button" class="zUI-btn sm" onclick="obj4.query()">主动调用查询</button>
                            <button type="button" class="zUI-btn sm" onclick="zUI.dialog.alert(JSON.stringify(obj4.collectSort()))">得到排序</button>
                            <button type="button" class="zUI-btn sm" onclick="obj4.resetSort(true)">重置排序</button>
                            <button type="button" class="zUI-btn sm" onclick="zUI.dialog.alert('<pre>'+JSON.stringify(obj4.collectParam(),null,2)+'</pre>')">得到查询参数</button>
                        </form>

                    </div>
                    <div style="width: 100%;height: calc(100% - 40px);overflow-y: auto">
                        <table id="table4"></table>
                    </div>
                </div>
            </td>
            <td>
                <pre id="code4" class="zUI-code" style="height: 300px;"></pre>
            </td>
        </tr>
    </table>


</div>
</body>

<script>
    var obj1,obj2,obj3,obj4,obj5,obj6;
    $(function () {
        zUI.tab.loadPanel({
            elem:'.zUI-card'
        });
        obj1 = zUI.table.load({
            elem:'#table1',
            nowrap: true, //禁止td换行
            cols: cols0_1,
            width: '450px',
            data: data.slice(0,8),
        });
        obj5 = zUI.table.load({
            elem:'#table5',
            cols: cols3,
            width: '600px',
            data: data.slice(0,8),
        });
        obj6 = zUI.table.load({
            elem:'#table6',
            nowrap: true, //禁止td换行
            intervalColor: ['#efe'], //行间跳色
            width: '600px',
            height: '400px',
            cols: cols1,
            data:data ,
            rowDetail: function (row,index) {
                var f = function () {
                    var str = '<th colspan="8">'+row.name+'的家庭成员信息</th></tr><tr name="rowdetail-toggle-'+index+'">';
                    str += '<td class="align-center"></td><td class="align-center">父亲</td>';
                    str += '<td class="align-center">'+(parseInt(row.age)+20)+'</td>';
                    str += '<td class="align-center">退休</td>';
                    str += '<td class="align-center">男</td>';
                    str += '<td class="align-center">散步</td>';
                    str += '<td class="align-center">武汉</td>';
                    str += '<td class="align-left">无</td>';
                    if(index === 0){
                        str+='</tr><tr name="rowdetail-toggle-'+index+'">';
                        str += '<td class="align-center"></td><td class="align-center">母亲</td>';
                        str += '<td class="align-center">'+(parseInt(row.age)+18)+'</td>';
                        str += '<td class="align-center">退休</td>';
                        str += '<td class="align-center">女</td>';
                        str += '<td class="align-center">逛商场</td>';
                        str += '<td class="align-center">武汉</td>';
                        str += '<td class="align-left">无</td>';
                        str+='</tr><tr name="rowdetail-toggle-'+index+'">';
                        str += '<td class="align-center"></td><td class="align-center">姐姐</td>';
                        str += '<td class="align-center">'+(parseInt(row.age)+3)+'</td>';
                        str += '<td class="align-center">python</td>';
                        str += '<td class="align-center">女</td>';
                        str += '<td class="align-center">敲代码</td>';
                        str += '<td class="align-center">武汉</td>';
                        str += '<td class="align-left" title="单身妹纸一枚">单身妹纸一枚</td>';
                    }
                    return str;
                };
                return f;
            },
            rowDetailExpand: function (row,index) {
                //是否展开行详情
                //return index %2==1;
                return true;
            },
            onToggleRow: function (row,index,type) {
                //展开或者折叠行详情事件
                console.log(index);
                zUI.dialog.alert('你'+(type==1?'展开':'折叠')+'了第'+(index+1)+"行");
            }
        });
        obj2 = zUI.table.load({
            elem:'#table2',
            intervalColor: ['#efe','#cef','#dfd'], //行间跳色
            nowrap: true, //禁止td换行
            width: '600px',
            height: '300px',
            cols: cols1,
            data:data ,
            tools:[
                {
                    name:'全部展开',
                    ico:'fa fa-plus',
                    func:function(){
                        obj2.expandAllRowDetail();
                    }
                },
                {
                    name:'全部折叠',
                    ico:'fa fa-minus',
                    func:function(){
                        obj2.collapseAllRowDetail();
                    }
                },
            ],
            rowDetail: function (row,index) {
                //return false时不插入行详情
                return index %3 == 1 ? false : '<div>数据详情：<br>'+JSON.stringify(row)+'</div>';
            },
            rowDetailExpand: function (row,index) {
                //是否展开行详情
                //return index %2==1;
                return false;
            },
            onToggleRow: function (row,index,type) {
                //展开或者折叠行详情事件
                console.log(row);
                console.log(index);
                console.log(type);
            }
        });
        obj3 = zUI.table.load({
            elem:'#table3',
            //url:'${basePath}/test/test/getTableData.action', //优先级大于data
            queryBtn: '#queryBtn', //绑定表格刷新按钮
            pageSize: 10, //初始分页数量
            pageSelects:[10,30],
            nowrap: true, //禁止td换行
            width:'750px',
            height:'300px',
            page: true, //是否显示分页栏
            cols: cols2,
            //静态数据也可以分页显示
            data:data,
            tools:[
                {
                    name:'新增',
                    ico:'fa fa-file-o',
                    func:function(){
                        zUI.dialog.alert('新增数据');
                    }
                },{
                    name:'删除',
                    ico:'fa fa-trash',
                    func:function(){
                        zUI.dialog.alert('删除数据');
                    }
                },{
                    name:'导出',
                    ico:'fa fa-sign-out',
                    func:function(){
                        zUI.dialog.alert('导出数据');
                    }
                },

            ],
            rowDetail: function (row,index) {
                //return false时不插入行详情
                return index %3 == 1 ? false : '<div>数据详情：<br>'+JSON.stringify(row)+'</div>';
            },
            rowDetailExpand: function (row,index) {
                //是否展开行详情
                //return index %2==1;
                return false;
            },
            onError: function(e){
                zUI.dialog.alert('加载失败');
            },
            beforeQuery: function (param) {
                //alert('请求之前');
            },
            onLoadData: function (rows,total) {
                //alert('数据请求完成');
            },
            onLoadTable: function (rows,total) {
                //alert('表格渲染完成');
            }
        });
        obj4 = zUI.table.load({
            elem:'#table4',
            url:'/test/test/getTableData.action', //优先级大于data
            //autoInit:false, //表格渲染之后是否自动初始化一次查询
            errorMsg:'接口请求失败', //请求失败显示文字
            parseErrorMsg:'接口返回格式错误', //请求失败显示文字
            intervalColor: ['#efe','#cef','#dfd'], //行间跳色
            queryBtn: '#queryBtn', //绑定表格刷新按钮
            queryForm: '#queryForm', //绑定查询使用的form表单
            showMask: function(){ //展示遮罩
                zUI.dialog.showMask({text:'数据加载中'});
            },
            closeMask: function(){ //关闭遮罩
                zUI.dialog.closeMask();
            },
            emptyOption: 'after', //查询前清除旧行
            pageSize: 30, //初始分页数量
            pageSizeName: 'pageSize',
            pageNumName: 'pageNum',
            rowsName: 'rows',
            totalName: 'total',
            pageSortName: '_sort',
            nowrap: true, //禁止td换行
            page: true, //是否显示分页栏
            cols: cols2,
            rowDetail: function (row,index) {
                //return false时不插入行详情
                if(index == 0 ){
                    return '';
                }
                return index %3 == 1 ? false : '<div>数据详情：<br>'+JSON.stringify(row)+'</div>';
            },
            rowDetailExpand: function (row,index) {
                //是否展开行详情
                //return index %2==1;
                return false;
            },
            onError: function(e){
                //zUI.dialog.alert('加载失败');
            },
            beforeQuery: function (param) {
                //alert('请求之前');
            },
            onLoadData: function (rows,total) {
                //alert('数据请求完成');
            },
            onLoadTable: function (rows,total) {
                //alert('表格渲染完成');
            },
            onSort: function (colName,type) {
                console.log(colName,type);
                if(colName === 'age'){
                    //返回false时阻止排序，即不可修改
                    zUI.dialog.alert('年龄字段排序不可修改');
                    return false;
                }
            }
        });

        zUI.code.render({
            elem:'#code1',
            value: "zUI.table.load({\n" +
                "   elem:'#table1',\n" +
                "   nowrap: true, //禁止td换行\n" +
                "   cols: [\n" +
                "       {title: '姓名',name:'name',tip:false,align:'center'},\n" +
                "       {title: '年龄',name:'age',align:'center'},\n" +
                "       {title: '职位',name:'job',align:'center'},\n" +
                "   ],\n" +
                "   width: '450px',\n" +
                "   data: [\n" +
                "       {name:'张三',age:28,job:'java'},\n" +
                "       {name:'张三',age:28,job:'java'},\n" +
                "       {name:'张三',age:28,job:'java'}\n" +
                "   ],\n" +
                "});"
        });
        zUI.code.render({
            elem:'#code2',
            value: "obj6 = zUI.table.load({\n" +
                "   elem:'#table6',\n" +
                "   nowrap: true, //禁止td换行\n" +
                "   intervalColor: ['#efe'], //行间跳色\n" +
                "   width: '600px',\n" +
                "   height: '300px',\n" +
                "   cols: cols1,\n" +
                "   data:data ,\n" +
                "   tools:[//表格按钮栏\n" +
                "       {\n" +
                "           name:'新增',\n" +
                "           ico:'fa fa-file-o',\n" +
                "           func:function(){\n" +
                "               zUI.dialog.alert('新增数据');\n" +
                "           }\n" +
                "       },{\n" +
                "           name:'删除',\n" +
                "           ico:'fa fa-trash',\n" +
                "           func:function(){\n" +
                "               zUI.dialog.alert('删除数据');\n" +
                "           }\n" +
                "       },{\n" +
                "           name:'导出',\n" +
                "           ico:'fa fa-sign-out',\n" +
                "           func:function(){\n" +
                "               zUI.dialog.alert('导出数据');\n" +
                "           }\n" +
                "       },\n" +
                "\n" +
                "   ]," +
                "   rowDetail: function (row,index) {\n" +
                "       var f = function () {\n" +
                "           var str = '<th colspan=\"8\">家庭成员信息</th></tr><tr name=\"rowdetail-toggle-'+index+'\">';\n" +
                "           str += '<td class=\"align-center\"></td><td class=\"align-center\">'+row.name+'的父亲</td>';\n" +
                "           str += '<td class=\"align-center\">'+(parseInt(row.age)+20)+'</td>';\n" +
                "           str += '<td class=\"align-center\">退休</td>';\n" +
                "           str += '<td class=\"align-center\">男</td>';\n" +
                "           str += '<td class=\"align-center\">散步</td>';\n" +
                "           str += '<td class=\"align-center\">武汉</td>';\n" +
                "           str += '<td class=\"align-left\">无</td>';\n" +
                "           return str;\n" +
                "       };\n" +
                "       return f;\n" +
                "   },\n" +
                "   rowDetailExpand: function (row,index) {\n" +
                "       //是否展开行详情\n" +
                "       //return index %2==1;\n" +
                "       return true;\n" +
                "   },\n" +
                "   onToggleRow: function (row,index,type) {\n" +
                "       //展开或者折叠行详情事件\n" +
                "       console.log(row);\n" +
                "       console.log(index);\n" +
                "       console.log(type);\n" +
                "   }\n" +
                "});"
        });
        zUI.code.render({
            elem:'#code3',
            value: "zUI.table.load({\n" +
                "   elem:'#table3',\n" +
                "   //url:'${basePath}/test/test/getTableData.action', //优先级大于data\n" +
                "   queryBtn: '#queryBtn', //绑定表格刷新按钮\n" +
                "   pageSize: 10, //初始分页数量\n" +
                "   pageSelects:[10,30],\n" +
                "   nowrap: true, //禁止td换行\n" +
                "   page: true, //是否显示分页栏\n" +
                "   cols: cols2,\n" +
                "   //静态数据也可以分页显示\n" +
                "   data:data,\n" +
                "   rowDetail: function (row,index) {\n" +
                "       //return false时不插入行详情\n" +
                "       return index %3 == 1 ? false : '<div>数据详情：<br>'+JSON.stringify(row)+'</div>';\n" +
                "   },\n" +
                "   rowDetailExpand: function (row,index) {\n" +
                "       //是否展开行详情\n" +
                "       //return index %2==1;\n" +
                "       return false;\n" +
                "   },\n" +
                "   onError: function(e){\n" +
                "       zUI.dialog.alert('加载失败');\n" +
                "   },\n" +
                "   beforeQuery: function (param) {\n" +
                "       //alert('请求之前');\n" +
                "   },\n" +
                "   onLoadData: function (rows,total) {\n" +
                "       //alert('数据请求完成');\n" +
                "   },\n" +
                "   onLoadTable: function (rows,total) {\n" +
                "       //alert('表格渲染完成');\n" +
                "   }\n" +
                "});"
        });
        zUI.code.render({
            elem:'#code4',
            value: "zUI.table.load({\n" +
                "   elem:'#table4',\n" +
                "   url:'/test/test/getTableData.action', //优先级大于data\n" +
                "   errorMsg:'接口请求失败了', //请求失败显示文字\n" +
                "   intervalColor: ['#efe','#cef','#dfd'], //行间跳色\n" +
                "   queryBtn: '#queryBtn', //绑定表格刷新按钮\n" +
                "   queryForm: '#queryForm', //绑定查询使用的form表单\n" +
                "   pageSize: 30, //初始分页数量\n" +
                "   pageSizeName: 'pageSize',\n" +
                "   pageNumName: 'pageNum',\n" +
                "   rowsName: 'rows',\n" +
                "   totalName: 'total',\n" +
                "   nowrap: true, //禁止td换行\n" +
                "   cols: cols2,\n" +
                "   rowDetail: function (row,index) {\n" +
                "       //return false时不插入行详情\n" +
                "       return index %3 == 1 ? false : '<div>数据详情：<br>'+JSON.stringify(row)+'</div>';\n" +
                "   },\n" +
                "   rowDetailExpand: function (row,index) {\n" +
                "       //是否展开行详情\n" +
                "       //return index %2==1;\n" +
                "       return false;\n" +
                "   },\n" +
                "   onError: function(e){\n" +
                "       zUI.dialog.alert('请求失败');\n" +
                "   },\n" +
                "   onSort: function (colName,type) {\n" +
                "       console.log(colName,type);\n" +
                "       if(colName === 'age'){\n" +
                "           //返回false时阻止点击排序操作\n" +
                "           return false;\n" +
                "       }\n" +
                "   }\n" +
                "});"
        });

    });
    var data = [
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三1',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三2',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三3',age:25,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三4',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
        {name:'张三',age:28,job:'java',sex:'男',love:'篮球',place:'武汉',desc:'嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻'},
    ];
    var cols1 = [
        {title: '姓名',name:'name',tip:false,align:'center'},
        {title: '年龄',name:'age',width:100,align:'center'},
        {title: '职位',name:'job',align:'center'},
        {title: '性别',name:'sex',align:'center'},
        {title: '兴趣爱好',name:'love',align:'left'},
        {title: '工作地',name:'place',align:'center'},
        {title: '简介',name:'desc',align:'left'},
    ];
    var cols2 = [
        {type:'checkbox',width:50},
        {title: '序号',tip:false,width:50,align:'center',format: function (v,row,i) {
                return i+1;
            }},
        {title: '姓名',name:'name',tip:false,width:150,align:'center',group:'基本信息',sortable:'desc'},
        {title: '年龄',name:'age',width:100,align:'center',group:'基本信息',fixed:true,sortable:'asc',format: function (v,row,i) {
                return v+'岁';
            }},
        {title: '职位',name:'job',align:'center',width:200,group:'基本信息',sortable:true},
        {title: '性别',name:'sex',align:'center',width:200,group:'附加信息'},
        {title: '兴趣爱好',name:'love',align:'left',width:200,group:'附加信息'},
        {title: '工作地',name:'place',align:'center',width:200,group:'附加信息'},
        {title: '简介',name:'desc',align:'left',width:200},
    ];
    var cols0 = [
        {title: '姓名',name:'name',tip:false,align:'center'},
        {title: '年龄',name:'age',align:'center'},
        {title: '职位',name:'job',align:'center'},
    ];
    var cols0_1 = [
        {title: '姓名',name:'name',tip:false,align:'center'},
        {title: '年龄',name:'age',align:'center'},
        {title: '职位',name:'job',align:'center'},
    ];
    var cols3 = [
        {title: '序号',tip:false,width:50,align:'center',format: function (v,row,i) {
                return i+1;
            }},
        {title: '姓名',name:'name',tip:false,align:'center',group:'基本信息'},
        {title: '年龄',name:'age',align:'center',fixed:true,group:'基本信息',format: function (v,row,i) {
                return v+'岁';
            }},
        {title: '职位',name:'job',align:'center',group:'基本信息'},
        {title: '性别',name:'sex',align:'center',group:'附加信息'},
        {title: '兴趣爱好',name:'love',align:'left',group:'附加信息'},
        {title: '工作地',name:'place',align:'center',group:'附加信息'},
        {title: '简介',name:'desc',align:'left'},
    ];

</script>


</html>